<template>
<h1>关于页面</h1>
<h2>{{ msg }}</h2>
<h3>{{ num }}</h3>
<button @click="test('Vue3')">点击</button>
<button @click="test3">获取数据</button>
<button @click="add">加</button>
</template>

<!-- 组合式API进阶写法 -->
<!-- setup:其实是一个语法糖（关键字） -->
<script lang="ts" setup>
import {ref,reactive} from "vue"
import { useRoute } from "vue-router";
import { useCounterStore } from "@/stores/counter";

const countStore = useCounterStore()

const route = useRoute()
//接受打印传递过来的参数
console.log(route.query);



//ref:定义一个数据的响应式
const msg = ref<string>("字符串")
const num = ref<number>(0)

//接口:描述对象（人）
interface IPerson{
  readonly id:number,
  name:string,
  age:number,
  sex:boolean,
  phone ?:number
}

//reactive：定义多个数据的响应式
const objReactive = reactive<IPerson>({
  id:1,
  name:"张三",
  age:20,
  sex:true,
  phone:10086
})
console.log("reactive:",objReactive);
console.log(objReactive.name,objReactive.age);

const objRef = ref({
  id:2,
  name:"李四",
  age:30,
  sex:false,
})
console.log("ref:",objRef);
console.log(objRef.value.name,objRef.value.age);



function test(params:string){
  alert(`Hello ${params}`)
}

function test2():string{
return msg.value
}
function test3(){
   var fn = test2()
   console.log(fn);
   
}
//响应式数据 - 数据双向绑定理念
// function add(){
//   num.value +=1
// }

//箭头函数（匿名函数）
// const add = () =>{
//   num.value+=1
// }

// 匿名函数
const add =function(){
  num.value -= 1
}


</script>

<style lang="less" scoped>

</style>